<template>
    <div class="text-[14px] relative">
        <el-select v-model="echartActive" class="select-c" placeholder="请选择" size="small">
            <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <ElRow :gutter="20" justify="space-between" class="mt-[20px] mb-[20px]">
            <ElCol :span="6">
                <div class="text-center text-[#999] text-[12px] mb-12px">
                    <span class="ico-tip ico-up"></span>上行
                </div>
                <div class="text-center">{{ curInfo.upriver }}</div>
            </ElCol>
            <ElCol :span="6">
                <div class="text-center text-[#999] text-[12px] mb-12px">
                    <span class="ico-tip ico-down"></span>下行
                </div>
                <div class="text-center">{{ curInfo.downriver }}</div>
            </ElCol>
            <ElCol :span="6">
                <div class="text-center text-[#999] text-[12px] mb-12px">总发送</div>
                <div class="text-center">{{ curInfo.bytesSent }}</div>
            </ElCol>
            <ElCol :span="6">
                <div class="text-center text-[#999] text-[12px] mb-12px">总接收</div>
                <div class="text-center">{{ curInfo.bytesRecv }}</div>
            </ElCol>
        </ElRow>
        <Echart ref="EchartRef" :options="echartOption" :height="300" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { bytesToSize } from "@/utils/index"
import echarts from '@/plugins/echarts'
import { Echart } from '@/components/Echart'
import { format } from "date-fns"
const EchartRef = ref(null)

const props = defineProps({
    info: {
        default: () => null
    },
    label: {
        default: () => ''
    }
})

let echartData = reactive({});
let echartActive = ref('')
let selectOption = ref([])

watch(
    () => props.info,
    (newVal, oldVal) => {
        if (oldVal) {
            console.log(newVal.NetTotalIO[0].bytesSent, new Date().getTime())
            if (echartData[newVal.NetTotalIO[0].name] === undefined) {
                echartData[newVal.NetTotalIO[0].name] = []
            }
            let up = (newVal.NetTotalIO[0].bytesSent - oldVal.NetTotalIO[0].bytesSent) / 3 //3s
            const down = (newVal.NetTotalIO[0].bytesRecv - oldVal.NetTotalIO[0].bytesRecv) / 3 //3s
            echartData[newVal.NetTotalIO[0].name].push({
                DiyTimestamp: format(newVal.DiyTimestamp, 'HH:mm:ss'),
                upriverData: (up / 1024).toFixed(2),
                downriverData: (down / 1024).toFixed(2),
                upriver: bytesToSize(up),
                downriver: bytesToSize(down),
                bytesRecv: bytesToSize(newVal.NetTotalIO[0].bytesRecv),
                bytesSent: bytesToSize(newVal.NetTotalIO[0].bytesSent),
            })
            if (echartData[newVal.NetTotalIO[0].name].length > 10) {
                echartData[newVal.NetTotalIO[0].name].shift()
            }

            for (let i = 0; i < newVal.NetEachCardIO.length; i++) {
                const newCardIO = newVal.NetEachCardIO[i];

                for (let j = 0; j < oldVal.NetEachCardIO.length; j++) {
                    const oldCardIO = oldVal.NetEachCardIO[j];
                    if (newCardIO.name === oldCardIO.name) {
                        if (!echartData[oldCardIO.name]) {
                            echartData[oldCardIO.name] = []
                        }
                        const up = (newCardIO.bytesSent - oldCardIO.bytesSent) / 3
                        const down = (newCardIO.bytesRecv - oldCardIO.bytesRecv) / 3
                        echartData[newCardIO.name].push({
                            DiyTimestamp: format(newVal.DiyTimestamp, 'HH:mm:ss'),
                            upriverData: (up / 1024).toFixed(2),
                            downriverData: (down / 1024).toFixed(2),
                            upriver: bytesToSize(up),
                            downriver: bytesToSize(down),
                            bytesRecv: bytesToSize(newCardIO.bytesRecv),
                            bytesSent: bytesToSize(newCardIO.bytesSent),
                        })
                        if (echartData[newCardIO.name].length > 10) {
                            echartData[newCardIO.name].shift()
                        }
                        break;
                    }
                }



            }
        }
        //第一次
        else if (!oldVal && !!newVal) {
            selectOption.value = [];
            if (selectOption.value.length === 0) {
                selectOption.value.push({
                    label: '全部',
                    value: newVal.NetTotalIO[0].name,
                })
            }
            if (echartActive.value === '') {
                echartActive.value = newVal.NetTotalIO[0].name
            }
            for (let i = 0; i < newVal.NetEachCardIO.length; i++) {
                const newCardIO = newVal.NetEachCardIO[i];
                selectOption.value.push({
                    label: newCardIO.name,
                    value: newCardIO.name,
                })
            }
        }
        // console.log(echartData, 'echartData')
    },
    {
        immediate: true
    }
)
//监听tab切换
watch(
    () => props.label,
    (newVal, oldVal) => {
        if (newVal === 'liu_linag') {
            if (EchartRef.value) {
                EchartRef.value.resizeHandler()
            }
        }
    },
    {
        immediate: true
    }
)
// 当前行信息
const curInfo = computed(() => {
    const keyDataList = echartData[echartActive.value];
    if (keyDataList && keyDataList.length > 0) {
        return keyDataList[keyDataList.length - 1];
    } else {
        return {
            upriver: '加载中...',
            downriver: '加载中...',
            bytesSent: '加载中...',
            bytesRecv: '加载中...',
        }
    }
})

const echartOption = computed(() => {
    let retOption;
    const echartDataItem = echartData[echartActive.value]
    if (props.info && echartDataItem && echartDataItem.length != 0) {
        let bgColor = "#fff";
        let color = [
            "#f7b851",
            "#52a9ff",
        ];

        let xAxisData = echartDataItem.map(v => v.DiyTimestamp);
        let yAxisData1 = echartDataItem.map(v => v.upriverData);
        let yAxisData2 = echartDataItem.map(v => v.downriverData);
        const hexToRgba = (hex, opacity) => {
            ''
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }

        retOption = {
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 10,
                top: 10,
                show: false,
            },
            tooltip: {
                trigger: "axis",
                valueFormatter: (args) => {
                    return args + ' KB'
                },
                axisPointer: {
                    type: 'cross'
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
            },
            grid: {
                top: 50,
                bottom: 5,
                left: 10,
                right: 10,
                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: xAxisData
            }],
            yAxis: [{
                type: "value",
                name: '单位：KB/s',
                axisLabel: {
                    textStyle: {
                        color: "#666"
                    }
                },
                nameTextStyle: {
                    color: "#666",
                    fontSize: 12,
                    lineHeight: 40
                },
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#E9E9E9"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [{
                name: "上行",
                type: "line",
                smooth: true,
                // showSymbol: false,/
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[0], 0.3)
                            },
                            {
                                offset: 1,
                                color: hexToRgba(color[0], 0.1)
                            }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData1
            }, {
                name: "下行",
                type: "line",
                smooth: true,
                // showSymbol: false,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[1], 0.3)
                            },
                            {
                                offset: 1,
                                color: hexToRgba(color[1], 0.1)
                            }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData2
            }]
        };
    } else {
        retOption = {}
    }
    return retOption
})
</script>

<style lang="less" scoped>
.select-c {
    position: absolute;
    right: 0px;
    top: -60px;
    z-index: 10;
    width: 120px;
}

.ico-tip {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 3px;
    border-radius: 5px;
}

.ico-up {
    background-color: #f7b851;
}

.ico-down {
    background-color: #52a9ff;
}
</style>